<template>

  <div class="container">
    <!-- <i class="fa fa-compass"></i> -->
    <header ref="header_ref">

        <div class="locationImg">
            <div class="fa fa-map-marker" aria-hidden="true">
            <!-- <div class="icon-location"></div> -->
            </div>
        </div>

        <div class="location-text">
            柳州市<i class="fa fa-caret-down"></i>
        </div>
    </header>
    <div class="search" ref="search">
        <div class="search-box">
            <div class="search-box-select">
                <i class="fa fa-search" style="margin-right:1vw"></i>搜索饿了么商家、商店名称
            </div>
        </div>
    </div>
    <div class="food_div">
        <ul class="foodType">
            <li v-for="item in foodTypeList" :key="item.id">
                <img :src="item.typeImge" @click="indexToBusinessList(item.id)">
                <p>{{ item.typeName }}</p>
            </li>
        </ul>
    </div>

    <div class="banner">
        <div class="banner-box">
            <h3>品质套餐</h3>
            <p>搭配齐全吃得好</p>
            <a>立即抢购 &gt;</a>
        </div>
    </div>

    <div class="superUser">
        <div class="left">
            <img src="/img/dcfl01.png">
            <span>超级会员</span>
            · 每月享超值权益
        </div>
        <div class="right">
            <a>立即开通 ></a>
        </div>
    </div>

    <div class="box">
        <div class="lineleft"></div>
        <p>推荐商家</p>
        <div class="lineright"></div>
    </div>

    <div class="recommentType">
        <li>
            "综合排序"
            <i class="fa fa-caret-down"></i>
        </li>
        <li>距离最近</li>
        <li>销量最高</li>
        <li>
            筛选
            <i class="fa fa-caret-down"></i>
        </li>
    </div>

    <ul class="businessList">
        <li v-for="item in hotBusinessList" :key="item.id">
            <img :src="item.businessImg">
            <div class="businessList-li-title">
                <div class="businessName">
                    <h3 v-text="item.businessName"></h3>
                    <div class="mark">·</div>
                </div>
                <div class="businessDelivery">
                    <div class="business-info-star-left">
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <i class="fa fa-star"></i>
                        <p>4.9 月售345单</p>
                    </div>
                    <div class="business-info-star-right">蜂鸟专送</div>
                </div>
                <div class="price">
                    <p>￥{{item.startPrice}}起送 | ￥{{ item.psPrice }}配送</p>
                    <p>3.23km | 30分钟</p>
                </div>
                <div class="explain">
                    <div class="foodExplain">各种饺子</div>
                </div>
                <div class="userSub">
                    <div class="left">
                        <div class="mark">新</div>
                        <div class="newUserExplain">新用户首单立减九元</div>
                    </div>
                    <div class="right">
                        "2个活动"
                        <i class="fa fa-caret-down"></i>
                    </div>
                </div>
                <div class="discounts">
                    <div class="mark">新</div>
                    <div class="newUserExplain">特价商品五元器</div>
                </div>
            </div>
        </li>
    </ul>
    <Footer></Footer>
  </div>
</template>

<script>
import Footer from '@/components/Footer.vue'

export default {

    mounted(){

        document.onscroll=()=>{
            let s1 = document.documentElement.scrollTop;
            let s2 = document.body.scrollTop;
            let scroll = s1==0?s2:s1;
            //获取header的高度：视口宽度*0.12
            let width = document.documentElement.clientWidth;
            let search = this.$refs.search;
            if(scroll > width*0.12){
                search.style.position='fixed';
                search.style.left='0';
                search.style.top='0';
            }else{
                search.style.position = 'static';
            }
        }
        this.foodTypeList=[
                {id:1,typeImge:'img/dcfl01.png',typeName:'美食'},
                {id:2,typeImge:'img/dcfl02.png',typeName:'美食'},
                {id:3,typeImge:'img/dcfl03.png',typeName:'美食'},
                {id:4,typeImge:'img/dcfl04.png',typeName:'美食'},
                {id:5,typeImge:'img/dcfl05.png',typeName:'美食'},
                {id:6,typeImge:'img/dcfl06.png',typeName:'美食'},
                {id:7,typeImge:'img/dcfl07.png',typeName:'美食'},
                {id:8,typeImge:'img/dcfl08.png',typeName:'美食'},
                {id:9,typeImge:'img/dcfl09.png',typeName:'美食'},
                {id:10,typeImge:'img/dcfl10.png',typeName:'美食'},
            ],
        this.hotBusinessList=[                
                {
                    id:1,
                    businessImg:'/img/dcfl01.png',
                    businessName:'麦当劳',
                    startPrice:20,
                    psPrice:2,
                },
                {
                    id:2,
                    businessImg:'/img/dcfl02.png',
                    businessName:'华莱士',
                    startPrice:30,
                    psPrice:1,
                },
                {
                    id:3,
                    businessImg:'/img/dcfl03.png',
                    businessName:'塔斯订',
                    startPrice:50,
                    psPrice:5,
                }
            ]
    },

    methods:{
        indexToBusinessList(id){
            this.$router.push({path:"/businessList",query:{typeId:id}})
        }
    },

    data(){
        return{
            typeId:this.$route.query.typeId,
            foodTypeList:[],
            hotBusinessList:[]
        }
    },
    components:{
        Footer
    }
}
</script>

<style scoped>

.container{
    width: 100%;
    height: 100%;
}


.container header{
    width: 100%;
    background-color: bisque;
    height: 12vw;
    color: white;
    display: flex;
    /* 垂直居中 */
    align-items: center;
    font-size: 3.4vw;
}

.container .locationImg{
    margin: 0 3vw;
}


/* search部分 */
.container .search{
    width: 100%;
    background-color: bisque;
    height: 12vw;
    color: gray;
    display: flex;
    /* 垂直居中 */
    align-items: center;
    /* 水平居中 */
    justify-content: center;
}

.container .search .search-box{
    background-color: white;
    width: 80%;
    border-radius: 5px;
    /* 以下两行代码，可以实现字体居中 */
    height: 8vw;
    line-height: 8vw;
}

/* .container .search .search-box .search-box-select{
    margin: 0 auto;
    width: 70%;
} */

.container .search .search-box .search-box-select{
    margin-left: 10vw;
    width: 70%;
    font-size: 3.4vw;
}

/* =======================美食分类=============== */

.food_div{
    width: 100%;
    height: 48vw;
}

.foodType{
    width: 90%;
    height: 48vw;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    justify-content: space-around;
    align-content: center;
}

.foodType li{
    width: 18vw;
    height: 20vw;
    display: flex;
    /* 设置主轴 */
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.foodType img{
    width: 12vw;
    height: 10vw;
}

.foodType p{
    font-size: 3.5vw;
}



/* =======================广告=============== */
.banner{
    width: 95%;
    height: 30vw;
    margin: 0 auto;
    background-image: url(../assets/index_banner.png);
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: -1;
}


.banner .banner-box{

    width: 50%;
    position: absolute;
    top: 2vw;
    left: 5vw;
}

.banner .banner-box h3{
    font-size: 4.2vw;
    margin-bottom: 1.2vw;
}

.banner .banner-box p{
    font-size: 3.6vw;
    margin-bottom: 2.4vw;
    color: #666;
}

.banner .banner-box a{
    font-size: 3vw;
    font-weight: 700;
    color: #C79060;
}



/* =============会员============= */
.superUser{
    width: 95%;
    height: 11.5vw;
    margin: 0 auto;
    background: #FEEDC1;
    display: flex;
    margin-top: 2vw;
}

.superUser .left{
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: left;
    font-size: 3vw;
}

.superUser .left img{
    width: 10vw;
    height: 10vw;
    margin-right: 2vw;
    margin-left: 5vw;
}

.superUser .left span{
    font-size: 4vw;
    margin-right: 2vw;
    font-weight: 700;
}

.superUser .right{
    display: flex;
    align-items: center;
    justify-content: center;
}

.superUser .right a{
    margin-right: 4vw;
    font-size: 3vw;
    cursor: pointer;
}


/* ================推荐商家============== */
.box{
    width: 95%;
    height: 14vw;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box .lineleft{
    width: 7vw;
    height: 0.2vw;
    background-color: #888;
    margin-right: 5vw;
}

.box .lineright{
    width: 7vw;
    height: 0.2vw;
    background-color: #888;
    margin-left: 5vw;
}


.recommentType{
    width: 95%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.recommentType li{
    list-style: none;
    font-size: 3.5vw;
    color: #555;
}



/* =================食品信息================= */
.businessList{
    width: 100%;
    margin-top: 6vw;
    padding-bottom: 10.5vw;
}

.businessList li{
    width: 95%;
    margin: 0 auto;
    display: flex;
    border-bottom: 0.1vw solid #666;
}

.businessList li img{
    width: 18vw;
    height: 18vw;
    margin-right: 3vw;
}

.businessList-li-title{
    width: 100%;

}

.businessList-li-title .businessName{
    display: flex;
    align-items: center;
    justify-content: left;
}

.businessList-li-title .businessName h3{
    flex: 1;
    font-size: 4vw;
    color: #333;
}

.businessList-li-title .businessName .mark{
    font-size: 4vw;
    font-weight: 700;
    width: 2vw;
    height: 4vw;
    background-color: #666;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 5vw;
}

.businessList-li-title .businessDelivery{
    display: flex;
}

.businessList-li-title .businessDelivery .business-info-star-left{
    display: flex;
    justify-content: left;
    align-items: center;
    flex: 1;
}

.businessList-li-title .businessDelivery .business-info-star-right{
    color: #FFFF;
    font-size: 3vw;
    background: #0097FF;
    padding: 0 2vw;
}


.businessList-li-title .businessDelivery .business-info-star-left i{
    color: #FEC80E;
    font-size: 3vw;
}
.businessList-li-title .businessDelivery .business-info-star-left p{
    color: #666;
    font-size: 3vw;
    color: #666;
    margin-left: 1vw
}


.price{
    display: flex;
    font-size: 3.6vw;
    color: #666;
}
.price p:first-of-type{
    flex: 1;
    margin-left: 1vw;
}
.price p:last-of-type{
    margin-right: 3vw;
}


.explain{
    display: flex;
    font-size: 3.2vw;
}

.explain .foodExplain{
    display: flex;
    border: 0.1vw solid #666;
}

.userSub{
    display: flex;
}

.userSub .left{
    display: flex;
    flex: 1;
    justify-content: left;
    align-items: center;
}


.userSub .left .mark{
    width: 4vw;
    height: 4vw;
    margin-right: 2vw;
    background-color: #70BC46;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 0.2vw;
    font-size: 3vw;
}

.userSub .left .newUserExplain{
    font-size: 3vw;
}

.userSub .right{
    font-size: 2.5vw;
    color: #999;
    margin-right: 2vw;
}


.discounts{
    display: flex;
}

.discounts .mark{
    width: 4vw;
    height: 4vw;
    margin-right: 2vw;
    background-color: #70BC46;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 0.2vw;
    font-size: 3vw;
}

.discounts .newUserExplain{
    font-size: 3vw;
    margin-bottom: 2vw;
}



</style>